<template>
  <scroll-view scroll-x class="sub-scroll">
    <view
      :class="{ 'selected-item': index == props.selectIndex }"
      @click="itemAction(index)"
      v-for="(item, index) in props.categoryList"
      :key="item.id"
      class="slider-item"
    >
      <text :class="{ selected: index == props.selectIndex }" class="title">{{ item.name }}</text>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
const emit = defineEmits(['itemTap'])
const props = defineProps({
  categoryList: {
    type: Array,
    default: () => []
  },
  selectIndex: {
    type: Number,
    default: 0
  }
})

const itemAction = (index: number) => {
  emit('itemTap', index)
}
</script>

<style lang="scss" scoped>
.sub-scroll {
  height: 20px;
  width: 100%;
  padding-bottom: 10px;
  white-space: nowrap;

  .slider-item {
    background-color: #ededed;
    display: inline-block;
    height: 20px;

    .title {
      font-size: 24upx;
      color: #666;
      background-color: #e4e4e4;
      padding: 0 20upx;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      margin-left: 20upx;
      display: block;
    }

    .selected {
      font-size: 24upx;
      color: #dc7601;
      background: linear-gradient(90deg, rgba(254, 149, 28, 0.16) -6.25%, rgba(238, 188, 43, 0.16) 100%);
    }
  }
}
</style>
